<template>
  <view class="query_container">
    <view class="query_box">
      <van-field
        :value="queryparam.goods_name"
        placeholder="点击搜索您想找的商品名称/订单号"
        input-class="input"
        @blur="inputchange"
      />
      <view class="query_btn_box">
        <van-dropdown-menu active-color="#6d55ed">
          <van-dropdown-item
            :value="queryparam.order_status"
            :options="option1"
            @change="status_change"
          />
        </van-dropdown-menu>
        <van-button custom-class="reset_btn" @tap="reset">重置</van-button>
        <van-button custom-class="query_btn" @tap="thequery">查询</van-button>
      </view>
    </view>

    <!-- 订单展示区域 -->
    <scroll-view :scroll-y="true" class="scroll-y" @scrolltolower="scroll_bottom">
    <view class="goods_container">
      <view class="goodsInfo_box" v-for="(item,index) in orderList" :key="index" @tap="go_detail(item)">
        <view class="goodsinfo">
          <image class="avatar" :src="item.goods_cover_img"></image>
          <view class="right">
            <view class="goods_btn">
              <view class="user_info">
                <image :src="item.buy_userImage" mode="" />
                <view class="user_name">{{item.buy_user_nickname}}</view>
              </view>
              <view class="status">{{statusList[item.order_status]}}</view>
            </view>

            <view class="goods_title"
              >{{item.goods_name}}</view
            >
          </view>
        </view>
        <view class="goodsdata">
          <view class="data_title">
            <view class="price gray">单价(折扣)</view>
            <view class="commision gray">数量</view>
            <view class="status gray">订单金额</view>
            <view class="num_remain gray">返佣</view>
            <view class="in gray">营收</view>
          </view>
          <view class="data_count">
            <view class="price black">{{item.platform_price}}</view>
            <view class="commision black">{{item.goods_amt}}</view>
            <view class="status black">{{item.platform_price*item.goods_amt}}</view>
            <view class="num_remain black">{{item.commission_price | toFixed2}}</view>
            <view class="in black">{{item.platform_price*item.goods_amt*(1-item.commission_rate) | toFixed2}}</view>
          </view>
        </view>
      </view>
    </view>
    </scroll-view>
    <!-- 商品展示区域 -->
    <van-toast id="van-toast" />
  </view>
</template>

<script>
import GoodInfo from "../components/good_info";
import {fetchList} from '../../utils/imapi'
const statusList = {
  0: '待付款',
  1: '待发货',
  2: '已发货',
  3: '交易完成',
  4: '售后',
  4: '交易取消',
};
export default {
  props: {},
  components: {
    GoodInfo,
  },
  data() {
    return {
      statusList,
      value: "",
      option1: [
        { text: "全部", value: '' },
        { text: "待付款", value: '0' },
        { text: "待发货", value: '1' },
        { text: "已发货", value: '2' },
        { text: "交易完成", value: '3' },
        { text: "售后", value: '4' },
        { text: "交易取消", value: '6' },
      ],
      value1: 0,
      orderList: [],
        queryparam: {
        order_status: '',
        goods_name: '',
        order_no: '',
        page_size: 6,
        page_index: 1,
      },
    };
  },
  computed: {},
  watch: {},
  onLoad() {
    this.query_order()
  },
  onReady() {},
  onShow() {},
  methods: {
  async  query_order() {
      try {
        const data = await fetchList(this.queryparam)
        console.log(data);
        if(data.code==0) {
          this.orderList = data.data
        }
      } catch (error) {
        
      }
    },
    status_change(e) {
      console.log(e.detail);
      this.queryparam.order_status=e.detail
    },
       inputchange(e) {
      console.log(e.detail);
      this.queryparam.goods_name=e.detail.value
    },
      reset() {
      this.queryparam = {
         order_status: '',
        goods_name: '',
        order_no: '',
        page_size: 6,
        page_index: 1,
      };
      console.log(this.queryparam);
      this.query_order()
    },
    thequery() {
      this.query_order()
    },
    async scroll_bottom() {
      console.log('触底了');
      this.queryparam.page_index++
      try {
        const data = await fetchList(this.queryparam)
        this.$toast.loading('加载中')
        if(data.code==0) {
           this.orderList.push(...data.data)
           console.log(data);
           this.$toast.clear()
        if(data.data.length==0) {
          this.queryparam.page_index--
          this.$toast('全部加载')
        }
        }
       
      } catch (error) {
        
      }
    },
    go_detail(item) {
      const id = item.order_id
      uni.navigateTo({
         url: '/pages/order_detail/order_detail?id='+id
      });
    }
  },
  onReachBottom() {},
  onHide() {},
};
</script>

<style scoped lang="scss" scoped>
.query_container {
  .goodsInfo_box {
    padding: 32upx;
    border-bottom: 16upx solid #f0eefd;
    .goodsinfo {
      display: flex;
      align-items: center;
      margin-bottom: 20upx;
      .avatar {
        width: 160upx;
        height: 160upx;
        margin-right: 20upx;
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .goods_title {
          width: 494upx;
          height: 80upx;
          text-align: left;
          font-size: 26upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #0a0819;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .goods_btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .user_info {
            display: flex;
            align-items: center;
            //   justify-content: space-between;
            image {
              width: 80upx;
              height: 80upx;
              border-radius: 50%;
            }
            .user_name {
              font-size: 30upx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #0a0819;
            }
          }
          .status {
            font-size: 26upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #727278;
          }
        }
      }
    }
    .goodsdata {
      .data_title,
      .data_count {
        display: flex;
        .price {
          width: 156upx;
          padding-left: 20upx;
        }
        .commision {
          width: 96upx;
          padding-left: 14upx;
        }
        .status {
          width: 156upx;
          padding-left: 12upx;
        }
        .num_remain {
          width: 136upx;

          padding-left: 12upx;
        }
        .in {
            width: 150upx;
            padding-right: 20upx;
                text-align: right;
        }
        .black {
          border: 1px solid #f0eefd;
        }
      }
      .data_title {
        height: 38upx;
        font-size: 10upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #727278;
        line-height: 38upx;
      }
      .data_count {
        height: 58upx;
        font-size: 26upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #0a0819;
        line-height: 58upx;
      }
    }
  }

  .query_box {
    width: 750upx;
    height: 220upx;
    background: #f0eefd;
    padding: 32upx;
    /deep/ .van-cell {
      height: 68upx;
      background: #ffffff;
      border-radius: 38upx;
         display: flex;
      align-items: center;
      .input {
        height: 100%;
        font-size: 24upx;
      }
    }
    .query_btn_box {
      margin-top: 20upx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /deep/ .van-dropdown-menu {
        width: 320upx;
        height: 68upx;
        background: #ffffff;
        border-radius: 34upx;
      }
      /deep/ .reset_btn {
        width: 168upx;
        height: 68upx;
        background: #ffffff;
        border-radius: 34upx;
        border: 2upx solid #6d55ed;
        text-align: center;
        line-height: 68upx;
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #6d55ed;
      }
      /deep/ .query_btn {
        width: 168upx;
        height: 68upx;
        background: #6d55ed;
        border-radius: 34upx;
        text-align: center;
        line-height: 68upx;
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #fff;
      }
    }
  }
}
.scroll-y {
  height: 1200upx;
}
</style>
